<template lang="html">
  <div class="search">
    <mark id="errMark">服务器响应异常，请稍后再试</mark>

    <div class="search-msg">
        <div class="search-box">
            <input type="text" placeholder="请输入公司名称" class="search-input" v-model="queryName">
            <button @click="query" class="search-botton">查询</button>
        </div>
        <ul class="search-list" v-show="queryDone">

          <li :key="index" v-for="(item,index) in items">
            <p>{{item.title}}</p>
            <span>{{item.value}}</span>
          </li>
          <li><a  download @click="getReport" id="downloadReport"><i></i> 下载</a><em>（若未下载成功请5分钟后尝试重新下载，服务器正在为您生成信用报告）</em></li>
        </ul>
    </div>
  </div>

</template>

<script>
import {setStore, getStore} from '@/assets/js/common'
import {
  getBaseInfo,
  getReportUrl
} from '@/server/queryCompany'

export default {
  created(){
    if(!getStore('userMsg')){
      window.location.href="/index.html";
    }
  },
  data() {
    return {
      queryName: '',
      queryDone: false,
      keyno: '',
      downloadURL: '',
      items: [{
          title: '企业名称：',
          value: '',
          key: 'name'
        },{
          title: '工商注册号：',
          value: '',
          key: 'no'
        }, {
          title: '统一社会信用代码：',
          value: '',
          key: 'creditcode'
        }, {
          title: '法定代表人：',
          value: '',
          key: 'opername'
        }, {
          title: '组织机构代码：',
          value: '',
          key: 'orgoo'
        }, {
          title: '注册资本：',
          value: '',
          key: 'registcapi'
        }, {
          title: '所属行业：',
          value: '',
          key: 'scope'
        }, {
          title: '企业类型：',
          value: '',
          key: 'econkind'
        }, {
          title: '经营状态：',
          value: '',
          key: 'status'
        }, {
          title: '成立日期：',
          value: '',
          key: 'startdate'
        }, {
          title: '核准日期：',
          value: '',
          key: 'updateddate'
        }, {
          title: '营业期限：',
          value: '',
          key: 'termstart'
        }, {
          title:'登记机关',
          value: '',
          key: 'belongorg'
        },{
          title: '注册地址：',
          value: '',
          key: 'address'
        }
      ]
    }
  },
  mounted() {
    let _this = this;
    document.onkeydown = function(e) {
      var currKey = 0,
        e = e || event;

      currKey = e.keyCode || e.which || e.charCode;
      if (currKey == 13) {
        _this.query()
      }
    }
  },

  methods: {
    query() {

      if(!getStore('userMsg')){
        window.location.href="/index.html";
        return;
      }

      if (!this.queryName.trim()){
        alert("请输入查询条件")
      } else {
        getBaseInfo({name: this.queryName.trim()}).then((res) => {
          let status = res.data.datas[0].status;
          let results = res.data.datas[0].result;

          if (status == "200") {
            this.items.forEach((e, i) => {
              if (i == 11) {
                e.value = results['termstart'] + ' 至 ' + results['teamend']
              }
              e.value = results[e.key]
            })

            this.keyno = results.keyno;
            this.queryDone = true;
            this.$forceUpdate();

            getReportUrl({keyno: this.keyno}).then((res) => {
              let  _data = res.data.datas[0];
              if (_data){
                if (_data.status == '200') {
                  document.getElementById('downloadReport').setAttribute('href',_data.result.OrderNo);
                  this.downloadURL = _data.result.OrderNo;
                } else {
                  alert("查询报告异常!")
                }
              } else {
                alert("暂无报告结果，请稍后下载!")
              }
            });

          } else {
            alert("查询公司信息异常!")
          }
        });
      }
    },
    getReport(){

      let url = document.getElementById('downloadReport').href;
      if (url == this.downloadURL) return;

      getReportUrl({keyno: this.keyno}).then((res) => {
        let  _data = res.data.datas[0];
        if (_data){
          if (_data.status == '200') {
            document.getElementById('downloadReport').setAttribute('href',_data.result.OrderNo);
            this.downloadURL = _data.result.OrderNo;
          } else {
            alert("查询报告异常!")
          }
        } else {
          alert("暂无报告结果，请稍后下载!")
        }
      });

      this.getReport();
    }
  }
}
</script>

<style lang="css">
body,html{
    margin: 0;
    padding: 0;
}

input,button{
    border: 0;
    outline: none;
}

a{
    text-decoration: none;
}

.search {
  position: relative;
}

#errMark {
  position: fixed;
  top: 22px;
  left: 50%;
  font-size: 16px;
  padding: 10px 20px;
  background: #f5f7fa;
  border-radius: 4px;
  color: #fa5555;
  transform: translateX(-50%);
  text-align: center;
  z-index: 11;
  display: none;
}

.search-msg {
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 20px;
    min-height: 406px;
}

.search-msg .search-box {
    width: 100%;
}

.search-msg .search-box input {
    width: 40%;
    min-width: 200px;
    max-width: 300px;
    height: 40px;
    text-indent: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 10px;
}

.search-msg .search-box .search-botton,.search-msg #downloadReport{
    display: inline-block;
    padding: 0 20px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    background: #3284a7;
    color: #fff;
    font-size: 14px;
}

#downloadReport{
    margin-top: 20px;
    padding: 0 50px !important;
}

.search-msg .search-box .search-botton:hover,.search-msg #downloadReport:hover{
    opacity: 0.8;
    cursor: pointer;
}

.search-msg ul {
    margin: 0;
    padding: 0;
    position: relative;
    top: 10px;
}

.search-msg ul li {
    list-style: none;
    position: relative;
    padding-left: 180px;
    line-height: 40px;
}

.search-msg ul li p {
    display: inline-block;
    margin: 0;
    text-align: left;
    font-size: 16px;
    min-width: 180px;
    position: absolute;
    left: 0;
}

.search-msg ul li span{
    display: inline-block;
}

.search-msg ul li em{
    color: #666;
    font-style: normal;
    font-size: 12px;
    margin-left: 10px;
}

</style>
